<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const data = [
      { id: "01", name: "张大大", pid: "", job: "项目经理" },

      { id: "02", name: "小亮", pid: "01", job: "产品leader" },
      { id: "07", name: "小丽", pid: "02", job: "产品经理" },
      { id: "08", name: "大光", pid: "02", job: "产品经理" },

      { id: "03", name: "小美", pid: "01", job: "UIleader" },
      { id: "09", name: "小高", pid: "03", job: "UI设计师" },
      { id: "05", name: "老王", pid: "01", job: "测试leader" },
      { id: "06", name: "老李", pid: "01", josb: "运维leader" },

      { id: "04", name: "老马", pid: "01", job: "技术leader" },
      { id: "10", name: "小刘", pid: "04", job: "前端工程师" },
      { id: "11", name: "小华", pid: "04", job: "后端工程师" },
      { id: "12", name: "小李", pid: "04", job: "后端工程师" },

      { id: "13", name: "小赵", pid: "05", job: "测试工程师" },
      { id: "14", name: "小强", pid: "05", job: "测试工程师" },
      { id: "15", name: "小涛", pid: "06", job: "运维工程师" }
    ],
    // // 完成代码
    //  arrToTree=(data)=> {
    //   const boss = []
    //   data.forEach(element => {//老板
    //     if (element.pid === '') {
    //       boss.push(element)
    //     }
    //     const children = data.filter(item => item.pid === element.id)//旗下员工
    //     element.children = children


    //   });
    //   return boss

    // }
    // const a = arrToTree(data)
    // console.log(a);
    tranListToTreeData = (data) => {
        const boss = []//放领导
        data.forEach(Element => {
          if (!Element.pid ) {//领导无pid,所以取反证明是领导,加入到为老板创建的数组中
            boss.push(Element)
          }
          //利用filter筛选出: 员工的pid===领导的id这些员工
          const children=data.filter(item=>item.pid===Element.id)
            Element.children=children//把筛选出来的员工加入到领导的children属性中(为领导动态创建的)
        })
        return boss
      }
      const a=tranListToTreeData(data)
      console.log(a);
  </script>
</body>

</html>